<template>
  <div>
    <el-tree
      node-key="id"
      :data="data"
      :props="defaultProps"
      :current-node-key="currentMenuKey"
      highlight-current
      auto-expand-parent
      accordion
      @node-click="handleMenuClick"
    />
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: "AppMenu" });
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import type { LeftMenu } from "../../types/common";
const router = useRouter();
const route = useRoute();
const data = ref<LeftMenu[]>([]);
const defaultProps = ref({
  children: "children",
  label: "label",
});
const currentMenuKey = ref("");
const handleMenuClick = (data: LeftMenu) => {
  currentMenuKey.value = data.id;
  router.push({
    path: data.path,
  });
};
onMounted(() => {
  data.value = [
    {
      id: "/home",
      label: "首页",
      path: "/home",
    },
    {
      id: "/screen",
      label: "数据大屏",
      path: "/screen",
    },
    {
      id: "/user",
      label: "人员管理",
      children: [
        {
          id: "/user/user",
          label: "用户管理",
          path: "/user/user",
        },
        {
          id: "/user/role",
          label: "角色管理",
          path: "/user/role",
        },
      ],
    },
    {
      id: "/product",
      label: "商品管理",
      children: [
        {
          id: "/product/product",
          label: "商品管理",
          path: "/product/product",
        },
        {
          id: "/product/brand",
          label: "品牌管理",
          path: "/product/brand",
        },
      ],
    },
  ];
  setTimeout(() => {
    currentMenuKey.value = route.path;
  }, 0);
});
</script>

<style lang="scss" scoped></style>
